<template>
	<view class="LoadingBox">
		<uni-popup ref="popup" type="center" :is-mask-click="mask" :mask-background-color="maskBackground">
			<Loading1 v-if="loadingType==1"/>
			<Loading2 v-if="loadingType==2"/>
			<Loading3 v-if="loadingType==3"/>
			<Loading4 v-if="loadingType==4"/>
			<Loading5 v-if="loadingType==5"/>
		</uni-popup>
	</view>
</template>

<script>
	import Loading1 from "./loading1.vue";
	import Loading2 from "./loading2.vue";
	import Loading3 from "./loading3.vue";
	import Loading4 from "./loading4.vue";
	import Loading5 from "./loading5.vue";
	export default {
		components:{Loading1,Loading2,Loading3,Loading4,Loading5},
		name: 'my-loading',
		props: {
			loadingType: {
				type: Number,
				default: 2
			},
			show: {
				type: Boolean,
				default: false
			},
			mask: {
				type: Boolean,
				default: false
			},
			maskBackground: {
				type: String,
				default: "rgba(0,0,0,0)"
			},
		},
		mounted() {
		},
		data() {
			return {
				
			};
		},
		watch: {
		    show: {
		        handler(newName) {
					this.$nextTick(()=>{
						if(newName){
							this.$refs.popup.open()
						}else{
							this.$refs.popup.close()
						}
					})
		        },
		        immediate: true,
		        deep: true
		    }
		}
	}
</script>

<style>

</style>
